<template>
  <div class="building-container">
    <!-- 搜索区域 -->
    <div class="search-area">
      <el-input
        v-model="searchForm.buildingName"
        placeholder="请输入楼宇名称"
        style="width: 280px"
        class="search-input"
      >
        <template slot="prepend">楼宇名称:</template>
      </el-input>
      <el-button type="primary" @click="handleSearch">查询</el-button>
    </div>

    <!-- 添加按钮 -->
    <el-button type="primary" class="add-btn" @click="handleAdd" size="small"
      >添加楼宇</el-button
    >

    <!-- 表格区域 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      border
      :header-cell-style="{ background: '#F5F7FA' }"
    >
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column prop="buildingName" label="楼宇名称" />
      <el-table-column prop="floors" label="层数" width="100" />
      <el-table-column prop="area" label="在管面积(m²)" width="150" />
      <el-table-column prop="price" label="物业费(元/m²)" width="150" />
      <el-table-column prop="status" label="状态" width="100">
        <template slot-scope="{ row }">
          <el-tag :type="row.status === '空置中' ? 'info' : 'success'">
            {{ row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" fixed="right">
        <template slot-scope="{ row }">
          <el-button type="text" size="small" @click="handleEdit(row)"
            >编辑</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="handleDelete(row)"
            style="color: #f56c6c"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        :current-page.sync="currentPage"
        :page-size.sync="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "BuildingManage",

  data() {
    return {
      // 搜索表单数据
      searchForm: {
        buildingName: "",
      },

      // 表格数据
      tableData: [
        {
          buildingName: "强国集团大楼",
          floors: 20,
          area: 6666.6,
          price: 666666.6,
          status: "租赁中",
        },
        {
          buildingName: "办公楼28栋111",
          floors: 5,
          area: 500,
          price: 2.5,
          status: "空置中",
        },
      ],

      // 分页相关
      currentPage: 1,
      pageSize: 10,
      total: 29,
    };
  },

  methods: {
    // 搜索方法
    handleSearch() {
      console.log("搜索条件：", this.searchForm);
      // 实际项目中这里需要调用接口
    },

    // 添加楼宇
    handleAdd() {
      // 跳转到添加页面或打开添加对话框
    },

    // 编辑楼宇
    handleEdit(row) {
      console.log("编辑：", row);
    },

    // 删除楼宇
    handleDelete(row) {
      this.$confirm("确认删除该楼宇信息吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 实际项目中这里需要调用删除接口
          this.$message.success("删除成功");
        })
        .catch(() => {});
    },

    // 分页大小改变
    handleSizeChange(val) {
      this.pageSize = val;
      // 重新获取数据
    },

    // 页码改变
    handleCurrentChange(val) {
      this.currentPage = val;
      // 重新获取数据
    },
  },
};
</script>

<style lang="scss" scoped>
.building-container {
  padding: 20px;

  .search-area {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .search-input {
      margin-right: 10px;
    }
  }

  .add-btn {
    margin-bottom: 20px;
  }

  .pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
